<template>
	<u-popup :show="openModal" round="10" mode="center" :closeOnClickOverlay="true" :closeable="true" @close="close">
		<view class="userInfo" v-if="userinfo">
			<u-text text="完善资料可体验更多功能" :block="true" align="center" size="18"></u-text>
			<!-- #ifdef MP-WEIXIN -->
			<button class="u-reset-button avatars" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-avatar :src="userinfo.avatar?(imgUrl + userinfo.avatar):''" shape="circle" size="80" customStyle="margin:0 auto;">
				</u-avatar>
				<u-icon name="camera-fill" size="24" color="#fff" customStyle="position: absolute;left: 165px;bottom: -50px;">
				</u-icon>
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-upload @afterRead="upload" name="qr" :maxCount="1" customStyle="align-items:center;padding:30px 0px;">
				<u-avatar :src="userinfo.avatar?(imgUrl + userinfo.avatar):''" shape="circle" size="80" customStyle="margin:0 auto;">
				</u-avatar>
			</u-upload>
			<!-- #endif -->
			<form @submit="submit">
				<input name='avatar' :value="userinfo.avatar" style="display: none;"></input>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3">
						<u-text text="昵称:" align="center" size="14"></u-text>
					</u-col>
					<u-col span="9">
						<input type="nickname" name='nickname' placeholder="请输入昵称"
							:value="userinfo.nickname" style="border-bottom: 1px solid #eee;font-size: 14px;"></input>
					</u-col>
				</u-row>
				<view class="tips-box">
					99%+的用户选择使用微信头像和微信昵称，便于更好的体验更多的功能
				</view>
				<button class="button u-reset-button" :class="color+'-bg'" form-type="submit">
					提交完善
				</button>
			</form>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		name: "setuser",
		data() {
			return {
				openModal: false,
				userinfo: uni.getStorageSync("user"),
			}
		},
		watch: {
			value: {
				handler(val) {
					this.openModal = val
				},
			}
		},
		created() {
			this.userinfo = uni.getStorageSync("user")
			if (this.userinfo.nickname.indexOf("投票用户") != -1) {
				this.userinfo.nickname = ''
			}
		},
		methods: {
			close() {
				this.openModal = false
				this.$emit('input', false)
			},
			submit(e) {
				if (!e.detail.value.avatar) {
					uni.$u.toast('请上传头像')
					return;
				}
				if (!e.detail.value.nickname) {
					uni.$u.toast('请输入昵称')
					return;
				}
				this.http('user/save', e.detail.value, 'post').then(res => {
					uni.$u.toast('保存成功')
					uni.setStorageSync("user", res.data.user)
					this.close()
					this.$emit('updated', res.data.user)
				});
			},

			onChooseAvatar(e) {
				this.utils.uploadFile(this, e.detail.avatarUrl).then(res => {
					this.userinfo.avatar = res.data.url;
				});
			},
			async upload(e) {
				await this.utils.uploadFile(this, e.file.url).then(res => {
					this.userinfo.avatar = res.data.url;
				});
			},
			nickname(e) {
				this.userinfo.nickname = e;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.userInfo {
		width: 340px;
		height: auto;
		padding: 30rpx 40rpx;

		.avatars {
			padding: 30px 0;
			position: relative;

			.u-icon {
				position: absolute;
				left: 165px;
				bottom: 30px;
				display: inline-block !important;
			}
		}

		.tips-box {
			width: 100%;
			padding: 20rpx;
			background-color: #f6f7fb;
			color: #999;
			font-size: 22rpx;
			line-height: 45rpx;
			margin: 40rpx 0;
		}

		.button {
			border-radius: 100px;
			height: 40px;
			line-height: 40px;
			overflow: hidden;
			font-size: 14px;
		}
	}
</style>
